<template>
	<view class="fui-wrap">
		<fui-sticky>
			<fui-notice-bar content="展示与我相关的所有停车记录" height="88" size="30" single background="#fff" color="#333">
				<view class="fui-icon__box">
					<fui-icon name="notice-fill" :size="40" color="#ea3030"></fui-icon>
				</view>
				<template v-slot:right>
					<view class="fui-more__wrap" @click="showPopup=true">
						<text class="fui-more__text">查看规则</text>
						<fui-icon name="arrowright" :size="36" color="#7F7F7F"></fui-icon>
					</view>
				</template>
			</fui-notice-bar>
		</fui-sticky>
		<fui-list>
			<fui-list-cell v-for="(item,index) in list" :key="index" arrow @click="$navigateTo('index/recordsdetail?records_id='+item.id)">
				<view class="item">
					<view class="line">
						<view class="park">
							<fui-icon name="order" size="30" color="#aaaaaa"></fui-icon>
							<fui-text style="margin:0 10rpx;" :text="item.plate_number" color="#000000" :size="28" block></fui-text>
							<fui-tag :text="item.rules_type_txt" background="#599cff" color="#fff" :padding="['8rpx','10rpx']"></fui-tag>
						</view>
						<view class="park">
							<fui-icon name="location" size="30" color="#aaaaaa"></fui-icon>
							<fui-text style="margin-left:10rpx;" :text="item.parking_title" color="#000000" :size="28" block></fui-text>
						</view>
						<view class="park">
							<fui-icon name="wait" size="30" color="#aaaaaa"></fui-icon>
							<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.entry_time)+' 入场'" color="#000000" :size="28" block></fui-text>
						</view>
						<view class="park" v-if="item.status==3 || item.status==4 || item.status==5 || item.status==7">
							<fui-icon name="wait" size="30" color="#fff"></fui-icon>
							<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.exit_time)+' 出场'" color="#000000" :size="28" block></fui-text>
						</view>
					</view>
					<view class="price">
						<fui-tag :text="item.status_txt" :background="statusColor[item.status]" color="#fff" :padding="['8rpx','10rpx']"></fui-tag>
						<fui-text v-if="item.pay_fee>0"  fontWeight="800" :text="'-'+parseNumber(item.pay_fee)+'元'" color="#2aaa0e" :size="32" block></fui-text>
					</view>
				</view>
			</fui-list-cell>
		</fui-list>
		<fui-landscape :z-index="9999" :show="showPopup" :closable="true" :position="1" @close="showPopup=false">
			<view class="fui-ani__box">
				<image class="fui-hd__img" :src="`${baseUrl}/assets/img/img_layer_3x.png`" mode="widthFix"></image>
				<view class="fui-flex__center fui-flex__column">
					<view class="fui-ani__title">停车记录展示规则</view>
					<view class="fui-desc">
						<fui-text text="1、展示我认证过的车牌的停车记录。" :size="28" block></fui-text>
						<fui-text text="2、在停车场办理月卡，储值卡，会员卡时绑定了微信，展示关联车牌的停车记录。" :size="28" block></fui-text>
						<fui-text @click="$navigateTo('index/addCar')" text="保护隐私，去认证车牌" decoration="underline" :size="28" block align="center"></fui-text>
					</view>
					<fui-button btn-size="medium"  @click="showPopup=false" radius="100rpx" background="linear-gradient(180deg, #E3BF82 0%, #997B4A 100%)" borderColor="rgba(0,0,0,0)" border-width="0">我知道了</fui-button>
				</view>
			</view>
		</fui-landscape>
		<fui-empty v-if="list.length===0" :src="`${baseUrl}assets/img/miniapp/empty.png`" title="暂无数据!" :marginTop="200"></fui-empty>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDateTime,parseNumber} from '@/utils/util.js'
	export default {
		data() {
			return {
				statusColor:{'0':'#43afe8','1':'#43afe8','2':'red','3':'green','4':'green','5':'#ffdd60','6':'#ffdd60','7':'red'},
				list:[],
				page:1,
				endData:false,
				showPopup:false,
				baseUrl:baseUrl
			}
		},
		onLoad(e) {
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		onPullDownRefresh() {
			this.list=[];
			this.page=1;
			this.endData=false;
			this.getList(function(){
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			...methods,
			parseNumber,
			formatDateTime:function(item){
				return formatDateTime(new Date(item*1000)).slice(0,16);
			},
			getList:function(callback=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get('records/list',{
					page:this.page
				},true).then(res=>{
					this.list=this.list.concat(res);
					this.page++;
					if(res.length<10){
						this.endData=true;
					}	
					if(callback){
						callback();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.line{
	display: flex;
	flex-direction: column;
	.park{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
}
.fui-ani__box {
	width: 640rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding-bottom: 64rpx;
}
.fui-hd__img {
	width: 100%;
	height: 192rpx;
	display: block;
}
.fui-desc{
	padding:20rpx 30rpx;
	height: 230rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-bottom: 30rpx;
}
.fui-ani__title {
	font-size: 36rpx;
	font-weight: 600;
	padding: 34rpx 0 12rpx;
	text-align: center;
}
.fui-icon__box {
	padding-left: 24rpx;
	padding-right: 12rpx;
}
.fui-more__wrap {
	display: flex;
	align-items: center;
	padding: 0 24rpx;
}
.fui-more__text {
	font-size: 26rpx;
	color: #7F7F7F;
}
</style>